<template>
  <div class="announcement-manage-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">系统公告管理</h1>
        <p class="page-desc">管理系统公告，支持富文本编辑和多端预览</p>
      </div>
      <div class="header-right">
        <el-button type="primary" size="large" @click="openAddDialog">
          <el-icon><Plus /></el-icon>
          新增公告
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-icon published">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ publishedCount }}</div>
                <div class="stats-label">已发布</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-icon draft">
                <el-icon><Edit /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ draftCount }}</div>
                <div class="stats-label">草稿</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-icon total">
                <el-icon><Files /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ totalCount }}</div>
                <div class="stats-label">总计</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card">
            <div class="stats-content">
              <div class="stats-icon recent">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="stats-info">
                <div class="stats-number">{{ recentCount }}</div>
                <div class="stats-label">本周新增</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <el-card class="main-content" shadow="never">
      <!-- 搜索筛选区域 -->
      <div class="filter-section">
        <el-form :inline="true" :model="searchForm" class="filter-form">
          <el-form-item label="标题">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入公告标题"
              clearable
              style="width: 200px"
              @keyup.enter="doSearch"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="全部状态" clearable style="width: 140px">
              <el-option label="全部状态" value="" />
              <el-option label="已发布" value="published" />
              <el-option label="草稿" value="draft" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSearch">
              <el-icon><Search /></el-icon>
              查询
            </el-button>
            <el-button @click="resetSearch">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <div class="table-section">
        <el-table
          :data="pagedList"
          style="width: 100%;"
          border
          stripe
          :header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
            <template #default="scope">
              <div class="title-cell">
                <span class="title-text">{{ scope.row.title }}</span>
                <el-tag v-if="isRecent(scope.row.createdAt)" size="small" type="warning">新</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="内容预览" min-width="300">
            <template #default="scope">
              <div class="content-preview" v-html="getContentPreview(scope.row.content)"></div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag
                :type="scope.row.status === 'published' ? 'success' : 'info'"
                effect="dark"
              >
                {{ scope.row.status === 'published' ? '已发布' : '草稿' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="scope" label="显示范围" width="150" align="center">
            <template #default="scope">
              <div class="scope-tags">
                <el-tag
                  v-for="scopeItem in scope.row.scope"
                  :key="scopeItem"
                  :type="getScopeTagType(scopeItem)"
                  size="small"
                  style="margin: 2px;"
                >
                  {{ getScopeText(scopeItem) }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pushMethods" label="推送方式" width="150" align="center">
            <template #default="scope">
              <div v-if="scope.row.scope.some(s => supportsPushNotification(s)) && scope.row.pushMethods.length > 0" class="push-methods-tags">
                <el-tag
                  v-for="method in scope.row.pushMethods"
                  :key="method"
                  :type="getPushMethodTagType(method)"
                  size="small"
                  style="margin: 2px;"
                >
                  {{ getPushMethodText(method) }}
                </el-tag>
              </div>
              <span v-else class="no-push">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="160" />
          <el-table-column prop="updatedAt" label="更新时间" width="160" />
          <el-table-column label="操作" width="280" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" type="info" @click="openDetailDialog(scope.row)">
                  <el-icon><View /></el-icon>
                  详情
                </el-button>
                <el-button size="small" type="primary" @click="openEditDialog(scope.row)">
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
                <el-button
                  size="small"
                  :type="scope.row.status === 'published' ? 'warning' : 'success'"
                  @click="toggleStatus(scope.row)"
                >
                  {{ scope.row.status === 'published' ? '下线' : '发布' }}
                </el-button>
                <el-button size="small" type="danger" @click="remove(scope.row)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="filteredList.length"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          style="margin-top: 20px; justify-content: flex-end;"
        />
      </div>
    </el-card>
    <!-- 公告新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogMode === 'add' ? '新增公告' : '编辑公告'"
      width="800px"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form :model="dialogForm" label-width="100px" :rules="dialogRules" ref="dialogFormRef">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公告标题" prop="title">
              <el-input
                v-model="dialogForm.title"
                maxlength="50"
                show-word-limit
                placeholder="请输入公告标题"
              />
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发布状态" prop="status">
              <el-radio-group v-model="dialogForm.status">
                <el-radio value="published">立即发布</el-radio>
                <el-radio value="draft">保存草稿</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示范围" prop="scope">
              <el-select
                v-model="dialogForm.scope"
                multiple
                placeholder="请选择显示范围"
                style="width: 100%"
                @change="handleScopeChange"
                collapse-tags
                collapse-tags-tooltip
              >
                <el-option label="B端会员" value="b_member">
                  <div class="scope-option">
                    <span>B端会员</span>
                    <small style="color: #999;">企业客户，支持推送通知</small>
                  </div>
                </el-option>
                <el-option label="C端会员" value="c_member">
                  <div class="scope-option">
                    <span>C端会员</span>
                    <small style="color: #999;">个人用户，支持推送通知</small>
                  </div>
                </el-option>
                <el-option label="内部员工" value="staff">
                  <div class="scope-option">
                    <span>内部员工</span>
                    <small style="color: #999;">公司员工，内部通知</small>
                  </div>
                </el-option>
              </el-select>

              <!-- 显示范围说明 -->
              <div v-if="Array.isArray(dialogForm.scope) && dialogForm.scope.length > 0" class="scope-explanation">
                <div class="scope-detail">
                  <el-icon><InfoFilled /></el-icon>
                  <div class="detail-content">
                    <div class="detail-title">已选择的显示范围：</div>
                    <div class="selected-scopes">
                      <el-tag
                        v-for="scope in dialogForm.scope"
                        :key="scope"
                        :type="getScopeTagType(scope)"
                        style="margin: 2px 4px 2px 0;"
                      >
                        {{ getScopeText(scope) }}
                        <span v-if="supportsPushNotification(scope)" class="push-support">📱</span>
                      </el-tag>
                    </div>
                    <div class="scope-descriptions">
                      <div v-if="Array.isArray(dialogForm.scope) && dialogForm.scope.includes('b_member')" class="scope-desc">
                        <strong>B端会员：</strong>企业客户、商户、批发商等商业用户
                      </div>
                      <div v-if="Array.isArray(dialogForm.scope) && dialogForm.scope.includes('c_member')" class="scope-desc">
                        <strong>C端会员：</strong>个人消费者、零售客户等个人用户
                      </div>
                      <div v-if="Array.isArray(dialogForm.scope) && dialogForm.scope.includes('staff')" class="scope-desc">
                        <strong>内部员工：</strong>公司员工、管理人员、客服等内部人员
                      </div>
                    </div>
                    <div v-if="hasPushSupportedScope()" class="push-note">
                      <el-icon><Bell /></el-icon>
                      <span>选中的范围支持推送通知配置</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 推送方式选择 - B端或C端会员显示 -->
        <el-row v-if="hasPushSupportedScope()" :gutter="20">
          <el-col :span="24">
            <el-form-item label="推送方式" prop="pushMethods">
              <div class="push-methods-container">
                <el-select
                  v-model="dialogForm.pushMethods"
                  multiple
                  placeholder="请选择推送方式"
                  style="width: 100%"
                  @change="handlePushMethodsChange"
                >
                  <el-option
                    v-for="method in pushMethodOptions"
                    :key="method.value"
                    :label="method.label"
                    :value="method.value"
                  >
                    <div class="push-option">
                      <span>{{ method.label }}</span>
                      <el-tag size="small" :type="method.tagType">{{ method.description }}</el-tag>
                    </div>
                  </el-option>
                </el-select>

                <!-- 推送方式预览气泡 -->
                <div v-if="dialogForm.pushMethods.length > 0" class="push-preview-container">
                  <div class="push-preview-title">推送效果预览</div>
                  <div class="phone-mockup">
                    <div class="phone-screen">
                      <!-- 手机状态栏 -->
                      <div class="status-bar">
                        <span class="time">9:41</span>
                        <div class="status-icons">
                          <span class="signal">●●●</span>
                          <span class="battery">100%</span>
                        </div>
                      </div>

                      <!-- 系统推送通知 - 显示在锁屏界面 -->
                      <div v-if="dialogForm.pushMethods.includes('push_notification')" class="lockscreen-container">
                        <div class="lockscreen-background">
                          <div class="lockscreen-time">
                            <div class="current-time">9:41</div>
                            <div class="current-date">7月22日 星期一</div>
                          </div>

                          <div class="push-notification-lockscreen">
                            <div class="notification-content">
                              <div class="notification-header">
                                <div class="app-icon">
                                  <el-icon><Bell /></el-icon>
                                </div>
                                <div class="notification-info">
                                  <div class="app-name">我的应用</div>
                                  <div class="notification-time">刚刚</div>
                                </div>
                              </div>
                              <div class="notification-title">{{ dialogForm.title || '公告标题' }}</div>
                              <div class="notification-text">{{ getContentPreview(dialogForm.content) || '公告内容预览...' }}</div>
                            </div>
                          </div>

                          <div class="lockscreen-bottom">
                            <div class="unlock-hint">滑动查看</div>
                          </div>
                        </div>
                      </div>

                      <!-- APP界面 - 仅在没有系统推送通知时显示，或显示其他推送方式 -->
                      <div v-else-if="!dialogForm.pushMethods.includes('push_notification')" class="app-interface">
                        <!-- APP顶部消息 -->
                        <div v-if="dialogForm.pushMethods.includes('app_top')" class="app-top-message">
                          <div class="message-content">
                            <el-icon class="message-icon"><Bell /></el-icon>
                            <span class="message-text">{{ dialogForm.title || '公告标题' }}</span>
                            <div class="red-dot"></div>
                          </div>
                        </div>

                        <!-- APP内容区域 -->
                        <div class="app-content">
                          <div class="app-header">
                            <span>我的应用</span>
                            <!-- 红点消息 -->
                            <div v-if="dialogForm.pushMethods.includes('red_dot')" class="header-icon">
                              <el-icon><Message /></el-icon>
                              <div class="red-dot-badge"></div>
                            </div>
                          </div>

                          <!-- 红点消息演示区域 -->
                          <div v-if="dialogForm.pushMethods.includes('red_dot')" class="red-dot-demo-area">
                            <div class="demo-title">红点消息演示</div>
                            <div class="demo-icons">
                              <div class="demo-icon-item">
                                <div class="app-icon-demo">
                                  <el-icon><Bell /></el-icon>
                                  <div class="red-dot-large">3</div>
                                </div>
                                <span class="icon-label">消息</span>
                              </div>
                            </div>
                            <div class="demo-description">
                              <el-icon><InfoFilled /></el-icon>
                              <span>红点角标会显示在应用图标右上角，提醒用户有未读消息</span>
                            </div>
                          </div>

                          <div v-else class="content-area">
                            <div class="placeholder-content">应用内容区域</div>
                          </div>
                        </div>

                        <!-- 弹窗提醒 -->
                        <div v-if="dialogForm.pushMethods.includes('popup')" class="popup-modal">
                          <div class="popup-overlay"></div>
                          <div class="popup-dialog">
                            <div class="popup-header">
                              <div class="popup-icon">
                                <el-icon><Bell /></el-icon>
                              </div>
                              <div class="popup-title">{{ dialogForm.title || '公告标题' }}</div>
                              <div class="popup-close">
                                <el-icon><Close /></el-icon>
                              </div>
                            </div>
                            <div class="popup-content">
                              <div class="popup-text">{{ getContentPreview(dialogForm.content) || '这是一条重要的公告通知，请您及时查看相关内容。' }}</div>
                            </div>
                            <div class="popup-footer">
                              <button class="popup-btn secondary">稍后查看</button>
                              <button class="popup-btn primary">立即查看</button>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 混合显示：系统推送 + APP内推送 -->
                      <div v-else class="mixed-interface">
                        <!-- 锁屏界面（半透明，显示系统推送） -->
                        <div class="lockscreen-overlay">
                          <div class="lockscreen-time">
                            <div class="current-time">9:41</div>
                            <div class="current-date">7月22日 星期一</div>
                          </div>

                          <div class="push-notification-lockscreen">
                            <div class="notification-content">
                              <div class="notification-header">
                                <div class="app-icon">
                                  <el-icon><Bell /></el-icon>
                                </div>
                                <div class="notification-info">
                                  <div class="app-name">我的应用</div>
                                  <div class="notification-time">刚刚</div>
                                </div>
                              </div>
                              <div class="notification-title">{{ dialogForm.title || '公告标题' }}</div>
                              <div class="notification-text">{{ getContentPreview(dialogForm.content) || '公告内容预览...' }}</div>
                            </div>
                          </div>
                        </div>

                        <!-- 背景APP界面（模糊显示其他推送方式） -->
                        <div class="background-app">
                          <div v-if="dialogForm.pushMethods.includes('app_top')" class="app-top-message blurred">
                            <div class="message-content">
                              <el-icon class="message-icon"><Bell /></el-icon>
                              <span class="message-text">{{ dialogForm.title || '公告标题' }}</span>
                            </div>
                          </div>

                          <div class="app-content blurred">
                            <div class="app-header">
                              <span>我的应用</span>
                              <div v-if="dialogForm.pushMethods.includes('red_dot')" class="header-icon">
                                <el-icon><Message /></el-icon>
                                <div class="red-dot-badge"></div>
                              </div>
                            </div>

                            <div v-if="dialogForm.pushMethods.includes('red_dot')" class="red-dot-demo-area blurred">
                              <div class="demo-icons">
                                <div class="demo-icon-item">
                                  <div class="app-icon-demo">
                                    <el-icon><Bell /></el-icon>
                                    <div class="red-dot-large">3</div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div v-else class="content-area">
                              <div class="placeholder-content">应用内容区域</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="公告内容" prop="content" class="content-editor-item">
          <QuillEditor
            v-model:content="dialogForm.content"
            contentType="html"
            style="min-height: 300px; width: 100%;"
            :options="editorOptions"
          />
        </el-form-item>

        <el-form-item label="附件上传" class="attachment-upload-item">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            multiple
            :auto-upload="false"
            :file-list="dialogForm.attachments"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 jpg/png/pdf 文件，且不超过 10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="openPreview('pc')">
            <el-icon><Monitor /></el-icon>
            PC预览
          </el-button>
          <el-button @click="openPreview('h5')">
            <el-icon><Iphone /></el-icon>
            H5预览
          </el-button>
          <el-button type="primary" @click="submitDialog" :loading="saving">
            <el-icon><Check /></el-icon>
            {{ dialogMode === 'add' ? '创建公告' : '保存修改' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 公告预览弹窗 -->
    <el-dialog
      v-model="previewVisible"
      :title="previewType === 'pc' ? 'PC端预览效果' : 'H5端预览效果'"
      :width="previewType === 'pc' ? '800px' : '450px'"
      :close-on-click-modal="true"
      center
    >
      <div v-if="previewType === 'pc'" class="preview-pc">
        <div class="preview-pc-card">
          <div class="preview-header">
            <div class="preview-title">{{ dialogForm.title }}</div>
            <div class="preview-meta">
              <span class="preview-time">{{ new Date().toLocaleString() }}</span>
              <el-tag :type="getPriorityType(dialogForm.priority)" size="small">
                {{ getPriorityText(dialogForm.priority) }}
              </el-tag>
            </div>
          </div>
          <el-divider />
          <div class="preview-content" v-html="dialogForm.content"></div>
        </div>
      </div>
      <div v-else class="preview-h5">
        <div class="preview-h5-shell">
          <div class="preview-h5-header">
            <div class="preview-title">{{ dialogForm.title }}</div>
            <div class="preview-meta">
              <span class="preview-time">{{ new Date().toLocaleString() }}</span>
            </div>
          </div>
          <div class="preview-content" v-html="dialogForm.content"></div>
        </div>
      </div>

      <template #footer>
        <el-button @click="previewVisible = false">关闭预览</el-button>
        <el-button type="primary" @click="switchPreviewType">
          切换到{{ previewType === 'pc' ? 'H5' : 'PC' }}预览
        </el-button>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="公告详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="detailData" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="公告标题" :span="2">
            <span class="detail-title">{{ detailData.title }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="发布状态">
            <el-tag :type="detailData.status === 'published' ? 'success' : 'info'">
              {{ detailData.status === 'published' ? '已发布' : '草稿' }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="显示范围" :span="2">
            <div class="scope-tags">
              <el-tag
                v-for="scopeItem in detailData.scope"
                :key="scopeItem"
                :type="getScopeTagType(scopeItem)"
                style="margin-right: 8px;"
              >
                {{ getScopeText(scopeItem) }}
              </el-tag>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="推送方式" :span="2">
            <div v-if="detailData.scope.some(s => supportsPushNotification(s)) && detailData.pushMethods.length > 0" class="push-methods-tags">
              <el-tag
                v-for="method in detailData.pushMethods"
                :key="method"
                :type="getPushMethodTagType(method)"
                style="margin-right: 8px;"
              >
                {{ getPushMethodText(method) }}
              </el-tag>
            </div>
            <span v-else class="no-push">无推送方式</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ detailData.createdAt }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ detailData.updatedAt }}
          </el-descriptions-item>
          <el-descriptions-item label="公告内容" :span="2">
            <div class="detail-content-html" v-html="detailData.content"></div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="openEditDialog(detailData!)">编辑</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElForm } from 'element-plus'
import { useRoute } from 'vue-router'
import {
  Plus, Document, Edit, Files, Clock, Search, Refresh, Delete,
  Monitor, Iphone, Check, UploadFilled, Bell, Message, ChatDotRound, InfoFilled, Close, View
} from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

interface Announcement {
  id: number
  title: string
  content: string
  status: 'published' | 'draft'
  scope: ('b_member' | 'c_member' | 'staff')[]
  pushMethods: string[]
  attachments: any[]
  createdAt: string
  updatedAt: string
}

const route = useRoute()

// 处理从工作台跳转过来的详情查看
onMounted(() => {
  const { id, view } = route.query
  if (id && view === 'detail') {
    const announcementId = parseInt(id as string)
    const announcement = list.value.find(item => item.id === announcementId)
    if (announcement) {
      openDetailDialog(announcement)
    } else {
      ElMessage.warning('公告不存在或已被删除')
    }
  }
})

// 搜索表单
const searchForm = reactive({
  title: '',
  status: '',
  dateRange: [] as Date[]
})

// 分页
const page = reactive({
  current: 1,
  size: 10
})

// 推送方式选项
const pushMethodOptions = ref([
  {
    value: 'push_notification',
    label: '系统推送通知',
    description: 'Push通知',
    tagType: 'success',
    position: 'outside'
  },
  {
    value: 'app_top',
    label: 'APP内顶部消息',
    description: '顶部横幅',
    tagType: 'primary',
    position: 'top'
  },
  {
    value: 'red_dot',
    label: '红点消息',
    description: '角标提醒',
    tagType: 'danger',
    position: 'icon'
  },
  {
    value: 'popup',
    label: '弹窗提醒',
    description: '模态弹窗',
    tagType: 'warning',
    position: 'popup'
  }
])

// Mock 数据
const list = ref<Announcement[]>([
  {
    id: 1,
    title: '系统维护通知',
    content: '<p>系统将于今晚22:00-24:00进行维护升级，期间可能影响部分功能使用。</p><p>维护内容包括：</p><ul><li>数据库优化</li><li>系统性能提升</li><li>安全补丁更新</li></ul>',
    status: 'published',

    scope: ['b_member', 'c_member', 'staff'],
    pushMethods: [],
    attachments: [],
    createdAt: '2024-07-18 10:00:00',
    updatedAt: '2024-07-18 10:00:00'
  },
  {
    id: 2,
    title: '新功能上线通知',
    content: '<p>首页装修功能已上线，支持可视化拖拽布局，欢迎体验使用。</p><p><strong>主要功能：</strong></p><ul><li>拖拽式组件布局</li><li>实时预览效果</li><li>多套模板选择</li></ul>',
    status: 'published',
    scope: ['b_member'],
    pushMethods: ['popup', 'red_dot'],
    attachments: [],
    createdAt: '2024-07-17 14:30:00',
    updatedAt: '2024-07-17 14:30:00'
  },
  {
    id: 3,
    title: '安全提醒',
    content: '<p>请及时修改密码，确保账号安全，建议使用强密码。</p><p>密码要求：</p><ul><li>至少8位字符</li><li>包含大小写字母</li><li>包含数字和特殊字符</li></ul>',
    status: 'draft',
    scope: ['c_member'],
    pushMethods: [],
    attachments: [],
    createdAt: '2024-07-16 09:15:00',
    updatedAt: '2024-07-16 09:15:00'
  },
  {
    id: 4,
    title: '优惠活动通知',
    content: '<p>双十一大促活动即将开始，全场商品最低5折起！</p><p>活动时间：11月1日-11月11日</p>',
    status: 'published',
    scope: ['b_member', 'c_member'],
    pushMethods: ['push_notification', 'app_top', 'red_dot'],
    attachments: [],
    createdAt: '2024-07-15 16:20:00',
    updatedAt: '2024-07-15 16:20:00'
  },
  {
    id: 5,
    title: '服务条款更新',
    content: '<p>根据相关法律法规要求，我们对服务条款进行了更新。</p><p>主要变更内容请查看附件。</p>',
    status: 'draft',
    scope: ['staff'],
    pushMethods: [],
    attachments: [],
    createdAt: '2024-07-14 11:45:00',
    updatedAt: '2024-07-14 11:45:00'
  }
])

// 统计数据
const publishedCount = computed(() => list.value.filter(item => item.status === 'published').length)
const draftCount = computed(() => list.value.filter(item => item.status === 'draft').length)
const totalCount = computed(() => list.value.length)
const recentCount = computed(() => {
  const oneWeekAgo = new Date()
  oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
  return list.value.filter(item => new Date(item.createdAt) > oneWeekAgo).length
})

// 筛选和分页
const filteredList = computed(() => {
  return list.value.filter(item => {
    const matchTitle = !searchForm.title || item.title.includes(searchForm.title)
    const matchStatus = !searchForm.status || item.status === searchForm.status

    let matchDate = true
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      const itemDate = new Date(item.createdAt)
      const startDate = new Date(searchForm.dateRange[0])
      const endDate = new Date(searchForm.dateRange[1])
      endDate.setHours(23, 59, 59, 999)
      matchDate = itemDate >= startDate && itemDate <= endDate
    }

    return matchTitle && matchStatus && matchDate
  })
})

const pagedList = computed(() => {
  const start = (page.current - 1) * page.size
  return filteredList.value.slice(start, start + page.size)
})

function doSearch() {
  page.current = 1
}

function resetSearch() {
  searchForm.title = ''
  searchForm.status = ''
  searchForm.dateRange = []
  page.current = 1
}

// 工具函数
function isRecent(dateStr: string): boolean {
  const date = new Date(dateStr)
  const now = new Date()
  const diffDays = (now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
  return diffDays <= 3
}

function getContentPreview(content: string): string {
  const text = content.replace(/<[^>]+>/g, '')
  return text.length > 100 ? text.substring(0, 100) + '...' : text
}



function getPushMethodTagType(method: string): string {
  const typeMap: Record<string, string> = {
    'push_notification': 'success',
    'app_top': 'primary',
    'red_dot': 'danger',
    'popup': 'warning'
  }
  return typeMap[method] || 'info'
}

function getPushMethodText(method: string): string {
  const textMap: Record<string, string> = {
    'push_notification': 'Push',
    'app_top': '顶部',
    'red_dot': '红点',
    'popup': '弹窗'
  }
  return textMap[method] || method
}

// 显示范围相关函数
function getScopeTagType(scope: string): string {
  const typeMap: Record<string, string> = {
    'b_member': 'success',
    'c_member': 'primary',
    'staff': 'warning'
  }
  return typeMap[scope] || 'info'
}

function getScopeText(scope: string): string {
  const textMap: Record<string, string> = {
    'b_member': 'B端会员',
    'c_member': 'C端会员',
    'staff': '内部员工'
  }
  return textMap[scope] || scope
}

function supportsPushNotification(scope: string): boolean {
  return ['b_member', 'c_member'].includes(scope)
}

function hasPushSupportedScope(): boolean {
  if (!Array.isArray(dialogForm.scope)) {
    return false
  }
  return dialogForm.scope.some(scope => supportsPushNotification(scope))
}

// 新增/编辑弹窗
const dialogVisible = ref(false)
const dialogMode = ref<'add' | 'edit'>('add')
const saving = ref(false)

// 详情对话框
const detailDialogVisible = ref(false)
const detailData = ref<Announcement | null>(null)

const dialogForm = reactive({
  id: 0,
  title: '',
  content: '',
  status: 'published' as 'published' | 'draft',

  scope: [] as ('b_member' | 'c_member' | 'staff')[],
  pushMethods: [] as string[],
  attachments: [] as any[]
})

const dialogFormRef = ref<InstanceType<typeof ElForm> | null>(null)

const dialogRules = {
  title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
  status: [{ required: true, message: '请选择发布状态', trigger: 'change' }],

  scope: [{ required: true, message: '请选择显示范围', trigger: 'change' }],
  pushMethods: [
    {
      validator: (rule: any, value: string[], callback: Function) => {
        if (dialogForm.scope === 'member' && (!value || value.length === 0)) {
          callback(new Error('会员用户必须选择至少一种推送方式'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

// 富文本编辑器配置
const editorOptions = {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],
      [{ 'indent': '-1'}, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['clean'],
      ['link', 'image']
    ]
  }
}

function openAddDialog() {
  dialogMode.value = 'add'
  Object.assign(dialogForm, {
    id: 0,
    title: '',
    content: '',
    status: 'published',

    scope: [],
    pushMethods: [],
    attachments: []
  })
  dialogVisible.value = true
}

// 处理显示范围变化
function handleScopeChange(value: string[]) {
  // 如果没有支持推送的范围，清空推送方式
  if (!hasPushSupportedScope()) {
    dialogForm.pushMethods = []
  }
}

// 处理推送方式变化
function handlePushMethodsChange(methods: string[]) {
  console.log('选择的推送方式:', methods)
}

function openEditDialog(row: Announcement) {
  dialogMode.value = 'edit'
  Object.assign(dialogForm, row)
  dialogVisible.value = true
}

function openDetailDialog(row: Announcement) {
  detailData.value = row
  detailDialogVisible.value = true
}

function submitDialog() {
  (dialogFormRef.value as any).validate(async (valid: boolean) => {
    if (!valid) return

    saving.value = true

    try {
      if (dialogMode.value === 'add') {
        const now = new Date().toLocaleString('zh-CN', { hour12: false })
        const newAnnouncement: Announcement = {
          id: Date.now(),
          title: dialogForm.title,
          content: dialogForm.content,
          status: dialogForm.status,
          priority: dialogForm.priority,
          scope: dialogForm.scope,
          attachments: dialogForm.attachments,
          createdAt: now,
          updatedAt: now
        }
        list.value.unshift(newAnnouncement)
        ElMessage.success('公告创建成功')
      } else {
        const idx = list.value.findIndex(item => item.id === dialogForm.id)
        if (idx > -1) {
          list.value[idx] = {
            ...dialogForm,
            createdAt: list.value[idx].createdAt,
            updatedAt: new Date().toLocaleString('zh-CN', { hour12: false })
          } as Announcement
          ElMessage.success('公告修改成功')
        }
      }
      dialogVisible.value = false
    } catch (error) {
      ElMessage.error('操作失败，请重试')
    } finally {
      saving.value = false
    }
  })
}

function toggleStatus(row: Announcement) {
  const newStatus = row.status === 'published' ? 'draft' : 'published'
  const action = newStatus === 'published' ? '发布' : '下线'

  ElMessageBox.confirm(
    `确定要${action}公告"${row.title}"吗？`,
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const idx = list.value.findIndex(item => item.id === row.id)
    if (idx > -1) {
      list.value[idx].status = newStatus
      list.value[idx].updatedAt = new Date().toLocaleString('zh-CN', { hour12: false })
      ElMessage.success(`${action}成功`)
    }
  }).catch(() => {
    // 用户取消操作
  })
}

function remove(row: Announcement) {
  ElMessageBox.confirm(
    `确定要删除公告"${row.title}"吗？删除后无法恢复。`,
    '确认删除',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    list.value = list.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  }).catch(() => {
    // 用户取消删除
  })
}

// 预览功能
const previewVisible = ref(false)
const previewType = ref<'pc'|'h5'>('pc')

function openPreview(type: 'pc'|'h5') {
  if (!dialogForm.title || !dialogForm.content) {
    ElMessage.warning('请先填写标题和内容')
    return
  }
  previewType.value = type
  previewVisible.value = true
}

function switchPreviewType() {
  previewType.value = previewType.value === 'pc' ? 'h5' : 'pc'
}
</script>

<style scoped>
.announcement-manage-page {
  width: 100%;
  min-height: 100vh;
  background: #f5f7fa;
  padding: 0;
  margin: 0;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 32px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-left .page-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-left .page-desc {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.header-right .el-button {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 统计卡片 */
.stats-cards {
  margin: 0 24px 24px 24px;
}

.stats-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.stats-icon.published {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stats-icon.draft {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stats-icon.total {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #666;
}

.stats-icon.recent {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #666;
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

/* 主要内容区域 */
.main-content {
  margin: 0 24px 24px 24px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.filter-section {
  padding: 24px 24px 0 24px;
  background: #fafbfc;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #e9ecef;
}

.filter-form {
  margin-bottom: 16px;
}

.table-section {
  padding: 24px;
}

/* 表格样式 */
.title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-text {
  font-weight: 600;
  color: #2c3e50;
}

.content-preview {
  color: #666;
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.push-methods-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.no-push {
  color: #999;
  font-style: italic;
}

/* 对话框样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 推送方式样式 */
.push-methods-container {
  width: 100%;
}

.scope-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scope-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #e8f4fd;
  border: 1px solid #b3d8ff;
  border-radius: 6px;
  color: #409eff;
  font-size: 12px;
}

.push-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.push-preview-container {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.push-preview-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
  text-align: center;
}

.phone-mockup {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

.phone-screen {
  width: 280px;
  height: 500px;
  background: #000;
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
}

.phone-screen::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #333;
  border-radius: 2px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 8px;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.status-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.signal {
  font-size: 8px;
}

.app-top-message {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 0 8px;
  border-radius: 8px;
  padding: 12px;
  animation: slideDown 0.5s ease-out;
}

.message-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 13px;
  position: relative;
}

.message-icon {
  font-size: 16px;
}

.message-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.red-dot {
  width: 8px;
  height: 8px;
  background: #ff4757;
  border-radius: 50%;
  position: absolute;
  top: -2px;
  right: -2px;
}

/* 锁屏界面样式 */
.lockscreen-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.lockscreen-background {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px 30px;
  position: relative;
}

.lockscreen-time {
  text-align: center;
  color: white;
  margin-top: 20px;
}

.current-time {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.current-date {
  font-size: 16px;
  opacity: 0.9;
  font-weight: 400;
}

.push-notification-lockscreen {
  width: 100%;
  max-width: 240px;
  background: rgba(0,0,0,0.8);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  animation: slideInFromTop 0.6s ease-out;
}

.lockscreen-bottom {
  text-align: center;
  color: white;
  opacity: 0.7;
}

.unlock-hint {
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
}

/* APP界面样式 */
.app-interface,
.mixed-interface {
  width: 100%;
  height: 100%;
  position: relative;
}

.app-content {
  background: white;
  margin: 8px;
  border-radius: 12px;
  flex: 1;
  overflow: hidden;
}

/* 混合界面样式 */
.lockscreen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px 30px;
  z-index: 2;
}

.background-app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.blurred {
  filter: blur(2px);
  opacity: 0.3;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
  color: #2c3e50;
}

.header-icon {
  position: relative;
  font-size: 20px;
  color: #666;
}

.red-dot-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  background: #ff4757;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* 红点消息演示区域 */
.red-dot-demo-area {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  margin: 16px;
}

.demo-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
  text-align: center;
}

.demo-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.demo-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.app-icon-demo {
  position: relative;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.app-icon-demo:hover {
  transform: scale(1.1);
}

.red-dot-large {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  background: #ff4757;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 0 6px;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  animation: redDotPulse 2s infinite;
}

.icon-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.demo-description {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #e8f4fd;
  border: 1px solid #b3d8ff;
  border-radius: 8px;
  color: #409eff;
  font-size: 12px;
  line-height: 1.4;
}

.demo-description .el-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* 弹窗提醒样式 */
.popup-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: popupFadeIn 0.3s ease-out;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.popup-dialog {
  position: relative;
  width: 200px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: popupSlideIn 0.3s ease-out;
  z-index: 1001;
}

.popup-header {
  padding: 20px 16px 12px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.popup-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: white;
  font-size: 20px;
}

.popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.4;
  margin-bottom: 8px;
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
  font-size: 14px;
  transition: all 0.2s ease;
}

.popup-close:hover {
  background: #e0e0e0;
  color: #666;
}

.popup-content {
  padding: 16px;
}

.popup-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  text-align: center;
}

.popup-footer {
  padding: 12px 16px 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.popup-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.popup-btn.secondary {
  background: #f5f5f5;
  color: #666;
}

.popup-btn.secondary:hover {
  background: #e0e0e0;
}

.popup-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.popup-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.content-area {
  padding: 20px 16px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-content {
  color: #999;
  font-size: 14px;
}

/* 通知内容样式 */
.notification-content {
  color: white;
}

.notification-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.app-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}

.notification-info {
  flex: 1;
}

.app-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.notification-time {
  font-size: 10px;
  opacity: 0.7;
}

.notification-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
}

.notification-text {
  font-size: 11px;
  opacity: 0.8;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 动画效果 */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-50px);
    opacity: 0;
    scale: 0.9;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    scale: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes redDotPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  }
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popupSlideIn {
  from {
    transform: scale(0.8) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* 预览样式 */
.preview-pc {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 400px;
  padding: 24px;
  background: #f8f9fa;
}

.preview-pc-card {
  width: 100%;
  max-width: 700px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 40px;
}

.preview-header {
  margin-bottom: 24px;
}

.preview-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
  line-height: 1.4;
}

.preview-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7f8c8d;
  font-size: 14px;
}

.preview-time {
  color: #95a5a6;
}

.preview-h5 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 400px;
  padding: 24px;
  background: #f8f9fa;
}

.preview-h5-shell {
  width: 375px;
  min-height: 600px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 24px 20px;
  border: 2px solid #e9ecef;
  position: relative;
  overflow: hidden;
}

.preview-h5-shell::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #bdc3c7;
  border-radius: 2px;
}

.preview-h5-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ecf0f1;
}

.preview-h5 .preview-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 8px;
}

.preview-h5 .preview-meta {
  text-align: center;
  font-size: 12px;
}

.preview-content {
  font-size: 16px;
  color: #2c3e50;
  line-height: 1.8;
  word-break: break-word;
}

.preview-content :deep(h1),
.preview-content :deep(h2),
.preview-content :deep(h3) {
  color: #2c3e50;
  margin: 20px 0 12px 0;
}

.preview-content :deep(p) {
  margin: 12px 0;
}

.preview-content :deep(ul),
.preview-content :deep(ol) {
  margin: 12px 0;
  padding-left: 20px;
}

.preview-content :deep(li) {
  margin: 6px 0;
}

.preview-content :deep(strong) {
  color: #2c3e50;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .stats-cards {
    margin: 0 12px 24px 12px;
  }

  .main-content {
    margin: 0 12px 24px 12px;
  }

  .filter-section,
  .table-section {
    padding: 16px;
  }

  .preview-pc-card {
    padding: 24px;
  }
}

/* 显示范围相关样式 */
.selected-scopes {
  margin-bottom: 12px;
}

.scope-descriptions {
  margin-bottom: 12px;
}

.scope-desc {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.push-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #e8f4fd;
  border: 1px solid #b3d8ff;
  border-radius: 6px;
  color: #409eff;
  font-size: 12px;
}

.push-support {
  margin-left: 4px;
  font-size: 12px;
}

.scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

/* 表单项间距调整 */
.content-editor-item {
  margin-bottom: 24px !important;
}

.content-editor-item .ql-container {
  min-height: 300px;
}

.attachment-upload-item {
  margin-top: 16px;
  clear: both;
}

.upload-demo {
  width: 100%;
}

.upload-demo .el-upload-dragger {
  width: 100%;
  height: 120px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.upload-demo .el-upload-dragger:hover {
  border-color: #409eff;
}

.upload-demo .el-icon--upload {
  font-size: 32px;
  color: #c0c4cc;
  margin: 20px 0 12px;
  line-height: 32px;
}

.upload-demo .el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.upload-demo .el-upload__text em {
  color: #409eff;
  font-style: normal;
}

.upload-demo .el-upload__tip {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  text-align: center;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

.action-buttons .el-button {
  flex-shrink: 0;
  min-width: auto;
  padding: 5px 8px;
}

.action-buttons .el-button .el-icon {
  margin-right: 2px;
}

/* 详情对话框样式 */
.detail-content {
  max-height: 600px;
  overflow-y: auto;
}

.detail-title {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.detail-content-html {
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.detail-content-html p {
  margin: 0 0 12px 0;
  line-height: 1.6;
}

.detail-content-html ul,
.detail-content-html ol {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

.detail-content-html li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.detail-content-html strong {
  font-weight: 600;
  color: #303133;
}

.no-push {
  color: #909399;
  font-style: italic;
}
</style>